<template>
  <div class="route-manage">
    <div class="route-left">
      <!-- 左边搜索 Start -->
      <div class="left-search">
        <div class="search">
          <a-input
            placeholder="输入产品名称/编码后按下回车搜索"
            v-model="leftSearch.keyWord"
            @keyup.enter="upLeftList"
          />
        </div>
      </div>

      <!-- 左边搜索 End -->

      <!-- 左边列表 Start -->
      <div
        :class="['left-list', leftList.length == 0 ? 'empty-box' : '']"
        infinite-scroll-immediate-check="false"
        infinite-scroll-listen-for-event="false"
        v-infinite-scroll="handleinfiniteOnLoad"
        infinite-scroll-disabled="busy"
        infinite-scroll-distance="20"
      >
        <a-empty v-if="leftList.length == 0" />
        <div v-else>
          <div
            :class="[
              'list-box',
              leftInfo.MaterialCode == item.MaterialCode ? 'active' : '',
            ]"
            v-for="item in leftList"
            :key="item.MaterialCode"
            @click="switchTab(item)"
          >
            <div class="list-left">{{ item.RowNo }}</div>
            <div class="list-right">
              {{ item.MaterialName }} ({{ item.MaterialCode }})
            </div>
          </div>
        </div>
      </div>
      <!-- 左边列表 End -->
    </div>
    <!-- 右边框架 Stratt -->
    <div class="route-right">
      <div class="right-title">
        <a-form layout="inline">
          <a-form-item label="选中配方">
            <a-select
              v-model="ERecipeCode"
              @change="handleChange"
              style="width: 18.75rem"
            >
              <a-select-option
                v-for="(item, index) in formulaList"
                :key="item.ERecipeCode"
              >
                {{ item.MaterialName }}({{ item.VersionName }}){{
                  item.IfDefault ? "默认" : ""
                }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <general-button
              @operation="editFormula"
              btnText="编辑"
              btnPowerNum="054CBE7B-494B-49B4-B9F9-13F32A02CE59"
              :btnDisabled="!defaultFormula.ERecipeCode ? true : false"
            ></general-button>
          </a-form-item>

          <a-form-item>
            <general-button
              @operation="approveFun"
              :btnText="defaultFormula.IfCheck == true ? '反审核' : '审核'"
              btnPowerNum="7466A601-75C9-48EE-B0CB-B1CC74A1087C"
              :btnDisabled="!defaultFormula.ERecipeCode ? true : false"
            ></general-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="right-info">
        <div class="info-box">
          选中配方： {{ defaultFormula.MaterialName }}({{
            defaultFormula.VersionName
          }}){{ defaultFormula.IfDefault ? "默认" : "" }}
        </div>
        <div class="info-box">
          当前版本：<span v-if="defaultFormula.VersionName">{{
            defaultFormula.VersionName || "暂无"
          }}</span>
        </div>
        <div class="info-box">
          审核人：{{ defaultFormula.CheckUserName || "暂无" }}
        </div>
        <div class="info-box">
          审核时间：<span v-if="defaultFormula.CheckDt">{{
            defaultFormula.CheckDt | dateFmt("YYYY-MM-DD HH:mm:ss")
          }}</span>
          <span v-else>暂无</span>
        </div>
        <div class="info-box">
          基准量：{{ defaultFormula.ReferenceAmount || "暂无" }}
        </div>
        <div class="info-box">
          审核状态：<span
            :style="{ color: defaultFormula.IfCheck ? '#1B813E' : '#DB4D6D' }"
            >{{ defaultFormula.IfCheck ? "已审核" : "未审核" }}</span
          >
        </div>
      </div>
      <div class="right-table">
        <div class="table-box">
          <div class="operation-table" id="OperationManageID">
            <div class="operation-table-box">
              <a-table
                className="components-table-demo-nested"
                :columns="tableColumns"
                :row-key="(record) => record.MaterialCode"
                :data-source="defaultFormula.ERecipeDetailList"
                :scroll="{ y: tableHegint }"
                :pagination="false"
                size="middle"
              >
                <template slot="action" slot-scope="text, record">
                  <div class="chart-manage">
                    <a-icon
                      type="edit"
                      class="icon-class"
                      @click="editFun(record)"
                    />
                  </div>
                </template>
              </a-table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右边框架 End -->
    <formula-form
      :show.sync="formulaShow"
      :form="defaultFormula"
      @edit="getERecipeListFun"
    ></formula-form>

    <formula-detail-form
      :show.sync="isEditShow"
      :form="currentRow"
      @edit="getERecipeListFun"
    ></formula-detail-form>
  </div>
</template>

<script>
import GeneralButton from "@/components/be-current-btn.vue";

import FormulaForm from "./children/formulaForm.vue";
import FormulaDetailForm from "./children/formulaDetailForm.vue";
import { getTableScroll } from "@/common/table-calc";
import moment from "moment";
import {
  getERecipeMaterialList,
  getERecipeList,
  checkERecipe,
  noCheckERecipe,
} from "@/api/formula/index";
const tableColumns = [
  {
    title: "序号",
    dataIndex: "IndexNo",
    sorter: true,
    width: "10%",
    align: "center",
  },
  {
    title: "物料编码",
    dataIndex: "MaterialCode",
    align: "center",
  },
  {
    title: "物料名称",
    dataIndex: "MaterialName",
    align: "center",
  },
  {
    title: "使用数量",
    dataIndex: "Quantity",
    align: "center",
  },
  {
    title: "单位",
    dataIndex: "ComunitName",
    align: "center",
  },
  {
    title: "BOM比例",
    dataIndex: "OrigQuantity",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "operate",
    width: "10%",
    align: "center",
    scopedSlots: { customRender: "action" },
  },
]; //表格表头
export default {
  name: "Formula",

  components: {
    GeneralButton,

    FormulaForm,
    FormulaDetailForm,
  },
  data() {
    return {
      tableHegint: 0, //工序表格高度
      isEditShow: false, //修改弹窗
      tableLoading: false, //序号表格loading
      tableColumns, //序号表头
      currentRow: {}, //修改明细
      ERecipeCode: null,

      leftSearch: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 20,
        },
        keyWord: "",
      }, //左边搜索
      leftList: [], //左边列表
      leftInfo: {}, //左边选中
      busy: false, //滚动
      defaultFormula: {}, //默认配方
      formulaShow: false, //配方编辑弹窗
      filterClicked: false, //筛选框
      formulaList: [], //配方列表
      currentItem: {}, //选中行
    };
  },
  methods: {
    //修改明细
    editFun(value) {
      this.currentRow = JSON.parse(JSON.stringify(value));
      this.isEditShow = true;
    },

    switchTab(item) {
      this.leftInfo = item;
      this.getERecipeListFun();
    },

    /** 更新左侧列表 */
    upLeftList() {
      this.leftSearch.pageRequestModel.pageIndex = 1;
      this.leftList = [];
      this.getLeftList();
    },

    //滚动触底方法
    handleinfiniteOnLoad() {
      this.busy = true;
      setTimeout(() => {
        this.leftSearch.pageRequestModel.pageIndex += 1;
        this.getLeftList();
      }, 1000);
    },

    //选择配方
    handleChange(value, option) {
      this.defaultFormula = this.formulaList.find(
        (item) => item.ERecipeCode == value
      );
    },

    /** 编辑配方 */
    editFormula(item) {
      this.defaultFormula = JSON.parse(JSON.stringify(this.defaultFormula));
      this.formulaShow = true;
    },

    /** 审核 */
    approveFun() {
      let that = this;
      let { IfCheck } = this.defaultFormula;
      this.$confirm({
        title: "提示",
        content: `${IfCheck ? "反审核" : "审核"}该配方`,
        async onOk() {
          if (IfCheck) {
            await noCheckERecipe(that.defaultFormula);
          } else {
            await checkERecipe(that.defaultFormula);
          }
          that.$message.success("操作成功");
          that.getERecipeListFun();
        },
        onCancel() {},
      });
    },

    /** 公用组件方法 */
    communalFun(value) {
      this[this.toptabsInfo.clickName](value);
    },
    /** 选择配方的方法 */
    topcurrentInfoFun(value) {
      this.currentItem = value;
    },

    /** 获取左侧列表 */
    async getLeftList() {
      try {
        let res = await getERecipeMaterialList(this.leftSearch);
        this.leftList = [...this.leftList, ...res.Data.Data];
        this.leftList.map((item) => {
          item.RowNo = this.leftList.indexOf(item) + 1;
        });
        if (res.Data.Data.length > 0) {
          this.leftInfo = this.leftList[0];
          this.getERecipeListFun();
        }
      } catch (e) {
        this.$message.error(e);
      } finally {
      }
    },

    /** 根据物料编码查询配方 */
    async getERecipeListFun() {
      try {
        let res = await getERecipeList({
          materialCode: this.leftInfo.MaterialCode,
        });
        this.formulaList = res.Data;
        this.formulaList.map((item, index) => {
          item.IndexNo = index + 1;

          item.ERecipeDetailList.map((itm, idx) => {
            itm.IndexNo = idx + 1;
            itm.ReferenceAmount = item.ReferenceAmount;
            itm.OrigQuantity = itm.Quantity / itm.ReferenceAmount;
            itm.OrigQuantity = parseFloat(itm.OrigQuantity.toFixed(6));
          });
        });

        this.defaultFormula = this.formulaList.find((item) => item.IfDefault);
        this.ERecipeCode = this.defaultFormula.ERecipeCode;
      } catch (e) {
        this.$message.error(e);
      } finally {
      }
    },
  },
  mounted() {
    this.getLeftList();
    window.addEventListener("resize", () => {
      this.$nextTick(() => {
        this.tableHegint = getTableScroll(40, "OperationManageID");
      });
    });
  },
  updated() {
    this.$nextTick(() => {
      this.tableHegint = getTableScroll(40, "OperationManageID");
    });
  },
};
</script>
<style lang="less" scoped>
.route-manage {
  background-color: #ffffff;

  padding: 0.5rem 1rem;
  flex: 1;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;

  .route-left {
    flex: 1;

    .left-search {
      display: flex;
      align-items: center;
      padding-bottom: 0.625rem;
      box-sizing: border-box;
      margin-bottom: 1.25rem;
      border-bottom: 2px solid #f0f2f5;

      .search {
        flex: 1;
      }

      .icon {
        margin-left: 1.25rem;
      }
    }

    .left-list {
      height: calc(100% - 64px);
      overflow-y: auto;

      &::-webkit-scrollbar {
        margin: 0.2rem;
        //整体样式
        height: 0.4125rem;
        width: 0.3rem;
      }

      &::-webkit-scrollbar-thumb {
        //滑动滑块条样式
        border-radius: 0.625rem;
        -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
        background: #009a9a;
        // background: rgba(2, 35, 60, 1);
      }

      &::-webkit-scrollbar-track {
        //轨道的样式
        -webkit-box-shadow: 0;
        border-radius: 0.625rem;
        background: #ccc;
      }

      &::-webkit-scrollbar-corner {
        background: red;
      }

      .list-box {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        font-size: 0.8125rem;
        padding: 0.9375rem 0.625rem;
        cursor: pointer;
        margin: 0 0.625rem;

        .list-left {
          flex: 2;
        }

        .list-right {
          flex: 10;
        }
      }

      .list-box:hover {
        background-color: #ecf7f8;
      }

      .active {
        background-color: #dcf0ef;
      }
    }
  }

  .route-right {
    margin-left: 1.25rem;
    flex: 5;

    .right-title {
      margin-bottom: 0.625rem;
    }

    .right-info {
      display: flex;
      margin-bottom: 0.625rem;

      .info-box {
        margin-right: 1.25rem;
        font-size: 0.875rem;
      }
    }

    .right-table {
      display: flex;
      flex-direction: column;
      height: calc(100% - 62px - 44px);

      .table-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;

        .operation-table {
          flex: 1;
          display: flex;
          flex-direction: column;
          height: 100%;
          overflow: hidden;
          .operation-table-box {
            height: 100%;
            flex: 2;
          }
        }
        .workunit-table {
          flex: 1;
          border: 1px solid #dddddd;
          border-radius: 0.625rem;
          padding: 0.9375rem;
          .workunit-title {
            margin-bottom: 0.625rem;
          }
        }
      }
    }
  }
}

.filter-content {
  padding-bottom: 0.625rem;
  margin-bottom: 0.625rem;
  border-bottom: 1px solid #f0f2f5;
}

.filter-footer {
  display: flex;
  justify-content: flex-end;

  button:nth-child(1) {
    margin-right: 0.625rem;
  }
}

//表格滚动条
/deep/.ant-table-body {
  overflow-x: hidden;

  &::-webkit-scrollbar {
    margin: 0.2rem;
    //整体样式
    height: 0.4125rem;
    width: 0.3rem;
  }

  &::-webkit-scrollbar-thumb {
    //滑动滑块条样式
    border-radius: 0.625rem;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
    background: #009a9a;
    // background: rgba(2, 35, 60, 1);
  }

  &::-webkit-scrollbar-track {
    //轨道的样式
    -webkit-box-shadow: 0;
    border-radius: 0.625rem;
    background: #ccc;
  }

  &::-webkit-scrollbar-corner {
    background: red;
  }
}

/deep/.ant-table-fixed-header
  > .ant-table-content
  > .ant-table-scroll
  > .ant-table-body {
  overflow-y: auto !important;
}

.empty-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
